import React, { useState, useEffect } from 'react';
import styles from './index.less';

import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
// import { useStatisticsData } from '../../index';
import _cloneDeep from 'lodash/cloneDeep';
import { useSelector } from 'umi';
import moment from 'moment';

const _data = [
  {
    value: 100,
    title: '进行中',
  },
  {
    value: 100,
    title: '未开始',
  },
  {
    value: 455,
    title: '已完成',
  },
];

const Chart2 = () => {
  // const [rawData] = useStatisticsData(); // 单一api中的值
  const rawData = useSelector(store => store.projectPage.statisticsData);

  const [data, setData] = useState(_data);
  const [dataOption, setDataOption] = useState(getAnalysisChartCfg(_data[0].title));

  useEffect(() => {
    if (!rawData) {
      return;
    }
    const newData = _cloneDeep(_data);
    newData[1].value =
      rawData.processTotalNumber -
      rawData.doingProcessTotalNumber -
      rawData.finishedProcessTotalNumber;
    newData[0].value = rawData.doingProcessTotalNumber;
    newData[2].value = rawData.finishedProcessTotalNumber;
    setData(newData);
  }, [rawData]);

  useEffect(() => {
    setDataOption(getAnalysisChartCfg());
  }, [data]);

  function getAnalysisChartCfg() {
    const testData = [
      13,
      11,
      12,
      12,
      13,
      23,
      26,
      35,
      49,
      54,
      58,
      61,
      58,
      54,
      68,
      72,
      77,
      76,
      72,
      69,
      65,
      63,
      53,
      32,
    ];
    let xData = [];
    let yData = [];
    const str = moment()
      .format('LT')
      .split(':')[0];
    const number = Number(str);
    let splitIndex = 0;
    for (let index = 0; index < 24; index++) {
      const data = number - index < 0 ? number - index + 24 : number - index;
      if (data === 0) {
        splitIndex = index;
      }
      yData.push(testData[data]);
      xData.push((data === 0 ? 24 : data) + ':00');
    }
    const date = moment().format('L');
    const dateLast = moment()
      .subtract(1, 'days')
      .format('L');
    splitIndex = 24 - splitIndex;

    let options = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderRadius: 5,
        borderColor: 'rgba(256,256,256,0.65)',
        padding: [5, 10], // [5, 10, 15, 20]
        textStyle: {
          color: 'rgba(256,256,256,0.75)',
          decoration: 'none',
          fontSize: 12,
          fontWeight: 'bold',
          padding: [10, 20],
        },
        formatter: function(item) {
          let str = item.dataIndex < splitIndex ? dateLast : date;
          return item.name === '基准线'
            ? '基准线：' + item.value
            : '时间：' + str + ' ' + item.name + '</br>' + '值：' + item.value;
        },
      },
      grid: {
        left: '2%',
        right: '5%',
        bottom: '15%',
        top: '10%',
        containLabel: true,
        // z: 22,
      },

      xAxis: [
        {
          type: 'category',
          gridIndex: 0,
          data: xData.reverse(),
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLabel: {
            show: true,
            color: 'rgba(255,255,255,0.5)',
            fontSize: 12,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
          max: 200,
          interval: 50,
          axisLabel: {
            color: 'rgba(255,255,255,0.5)',
            formatter: '{value}',
            fontSize: 12,
          },
          splitLine: {
            show: true, //网格线显示
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          },
        },
      ],
      series: [
        {
          type: 'line',
          emphasis: {
            focus: 'series',
          },
          markLine: {
            data: [{ name: '基准线', yAxis: 85 }],
            lineStyle: {
              color: '#ffffff',
            },
          },
          itemStyle: {
            color: '#2FFF9F',
          },
          data: yData,
          smooth: true,
        },
      ],
    };

    return options;
  }

  return (
    <div className={styles.box} style={{ paddingTop: 8 }}>
      {/* <div className={styles.unit}>单位：dB</div> */}
      <EchartsWrap option={dataOption} style={{ width: '100%', height: '100%' }} />
    </div>
  );
};
export default Chart2;
